<!--
 * @Descripttion:
 * @Author: caijj
 * @Date: 2021-02-05 09:58:40
 * @LastEditors: caijj
 * @LastEditTime: 2021-02-26 14:53:10
-->
<template>
  <el-form
    ref="edit-form"
    :model="formData"
    :rules="rules"
    size="small"
    label-width="100px"
    v-bind="$attrs"
  >
    <el-form-item label="上级部门" prop="fatherId">
      <el-cascader
        ref="departmentCascader"
        v-model="formData.fatherId"
        :options="cascader.options"
        :placeholder="cascader.placeholder || '请选择条件'"
        :props="cascader.props"
        :clearable="false"
        class="form-item-width"
        @change="onCloseCascader"
      />
    </el-form-item>
    <el-form-item label="部门名称" prop="name">
      <el-input
        v-model="formData.name"
        placeholder="请输入部门名称"
        maxlength="50"
        show-word-limit
        class="form-item-width form-item-padding-right"
      />
    </el-form-item>
    <el-form-item label="负责人" prop="principals">
      <personnel-options
        v-model="formData.principals"
        :department="cascader.options"
        :employees="employees"
        :default-props="{
          children: 'children',
          label: 'name'
        }"
        @onDepartmentClick="fetchDepartmentUser"
      />
    </el-form-item>
    <el-form-item label="部门描述" prop="description">
      <el-input
        v-model="formData.description"
        type="textarea"
        :rows="4"
        placeholder="请输入部门描述"
        class="form-item-width"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="btn" @click="onSubmit">提交</el-button>
      <el-button type="default" class="btn" @click="onReset">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import PersonnelOptions from '@/components/business/PersonnelOptions';
import { getDepartmentUser } from '@/api/partRoleApi';

const rules = {
  fatherId: [{ required: true, message: '请选择部门', trigger: 'select' }],
  name: [
    { required: true, min: 1, max: 50, message: '请输入部门名称，长度在 1 到 50 个字符', trigger: 'blur' }
  ]
};

export default {
  name: 'EditDepartment',
  components: {
    PersonnelOptions
  },
  props: {
    /* 级联选项 */
    cascader: {
      type: Object,
      default: () => {
        return {
          options: [],
          props: {},
          placeholder: ''
        };
      }
    },
    initVal: {
      type: Object,
      default: () => {
        return {
          fatherId: undefined,
          id: undefined,
          name: undefined,
          principals: [],
          description: ''
        };
      }
    }
  },
  data() {
    return {
      rules: rules,
      formData: {
        fatherId: undefined,
        name: undefined,
        principals: [],
        description: ''
      },
      employees: []
    };
  },
  created() {
    console.log(2);

    this.onInitValue();
    this.fetchDepartmentUser('');
  },
  methods: {
    onInitValue() {
      for (const [key, value] of Object.entries(this.initVal)) {
        this.formData[key] = value;
      }
    },
    onCloseCascader() {
      this.$refs.departmentCascader.dropDownVisible = false; // 监听值发生变化就关闭它
    },
    // 获取部门员工
    fetchDepartmentUser(department) {
      getDepartmentUser({ department }).then(
        ({ data = {}, resultCode } = {}) => {
          if (resultCode === '0000') {
            this.employees = data.map(({ name, userId }) => ({
              name,
              userId
            }));
          }
        }
      );
    },
    // 提交表单
    onSubmit() {
      const self = this;
      this.$refs['edit-form'].validate((valid) => {
        if (valid) self.$emit('onSubmit', self.formData);
      });
    },
    // 重置表单
    onReset() {
      // this.$refs['edit-form'].resetFields();
      this.$emit('onClose', false);
    }
  }
};
</script>
<style lang="scss" scoped>
.btn {
  width: 120px;
  height: 36px;
  margin-right: 30px;
}
.form-item-width {
  width: 48%;
}
.form-item-padding-right {
  ::v-deep .el-input__inner {
    padding-right: 45px;

  }
}
</style>
